<template>
	<view class="popup-container" :style="{ display: show ? 'flex' : 'none' }">
		<!-- 遮罩层 -->
		<view class="mask" @click="onMaskClick"></view>

		<!-- 弹层主体 -->
		<view
			class="popup-main"
			:style="{
				width: popupWidth + 'px'
			}"
		>
			<!-- 头部：用户信息 -->
			<view class="header">
				<view class="user-info" style="display: flex; flex-direction: row">
					<view class="avatar-wrap">
						<image class="avatar" :src="userInfo.nicPic.url || '/static/images/default-avatar.png'" mode="aspectFill"></image>
					</view>
					<view class="">
						<text class="username">{{ userInfo.nicName || '用户' }}</text>
					</view>
				</view>

				<view class="setting" @click="handleClick('setting')">
						<uni-icons type="gear" size="20" color="#55aaff"></uni-icons>
						<text class="setting_txt"> 个人设置</text>
				</view>
			</view>
			<view class="address" :style="{ width: popupWidth - 32 + 'px' }">
				<uni-icons class="uni-icons" type="location" size="18" color="#5f27cd"></uni-icons>
				<text class="address_txt u-line-2">{{ address.addressShort }}</text>
			</view>

			<!-- 功能菜单 -->
			<view class="menu-grid">
				<view class="menu-item" @click="handleClick('favorite')">
					<view class="menu-icon">
						<uni-icons :type="isFavorite ? 'star-filled' : 'star'" size="40" color="#ffaa7f"></uni-icons>
					</view>
					<text class="menu-text">{{ isFavorite ? '取消收藏' : '位置收藏' }}</text>
				</view>

				<view class="menu-item" @click="handleClick('dynamic')">
					<view class="menu-icon">
						<uni-icons type="chat" size="40" color="#5f27cd"></uni-icons>
					</view>
					<text class="menu-text">群 聊</text>
				</view>
				<view class="menu-item" @click="handleClick('shop')">
					<view class="menu-icon">
						<uni-icons type="home-filled" size="40" color="#ffaa7f"></uni-icons>
					</view>
					<text class="menu-text">店铺信息</text>
				</view>
				<view class="menu-item" @click="handleClick('good')">
					<view class="menu-icon">
						<uni-icons type="cart" size="40" color="#ffaa7f"></uni-icons>
					</view>
					<text class="menu-text">售卖商品</text>
				</view>
			</view>

			<!-- 底部按钮 -->
			<view class="footer" :style="{ width: this.popupWidth - 32 + 'px' }" @click="close">
				<text class="close-btn_txt">关闭</text>
			</view>
		</view>
		<input-dialog :isShow.sync="dialogShow" :placeholder="'位置备注名(可选)！'" :maxlength="10" @confirm='confirm'></input-dialog>
	</view>
</template>

<script>
import { getGridCode } from '../utils/getSurroundingGrids';
const linli = uniCloud.importObject('linliChat',{ customUI:true});
import { distanceNum } from '../utils/distance';
import Favorite from '../utils/favoriteClass';
import InputDialog from './InputDialog.vue';
export default {
		
	components:{
		InputDialog
	},
	data() {
		return {
			popupWidth: 0,
			isFavorite: false,
			favorite_id: '',
			favoriteManger:null,
			dialogShow:false
		};
	},
	computed: {
		userInfo() {
			return this.$store.state.msg.user;
		},
		address() {
			return this.$store.state.msg.address;
		},
		storeData() {
			return this.$store.state.msg;
		}
	},
	async mounted() {
		// 修复：uni.getSystemInfoSync不是回调函数，而是同步返回结果
		console.log(this.address);
		try {
			const res = this.storeData.systemInfo;
		
			// 计算85%的屏幕宽度作为弹层宽度
			this.popupWidth = res.windowWidth * 0.7;
			
			// 限制最大宽度为350px
			if (this.popupWidth > 350) {
				this.popupWidth = 350;
			}
		} catch (e) {
			console.error('获取设备信息失败', e);
			// 提供默认宽度
			this.popupWidth = 300;
		}
		this.favoriteManger=new Favorite(this.storeData.location,this.storeData,this.storeData.stateConfig.radius,)
	    this.getIsFavorite()
	},
	methods: {
		async getIsFavorite(){
			try{
			const res=await	 this.favoriteManger.isFavorited(this.storeData.location)
				this.isFavorite=res.code
				if(res.code){
					this.favorite_id=res.favorite?.favorite_id	
				}
			
			}catch(e){
				console.error(e);
			}
		 
		 },
		
		close() {
			this.$emit('close');
		},
      
		// 点击遮罩层
		onMaskClick() {
			// 可以根据需求决定是否点击遮罩关闭
			this.close();
		},

		// 菜单点击事件
		handleClick(type) {
			if (type === 'favorite') {
				this.handerlove();
			}
			if (type === 'dynamic') {
				uni.navigateTo({
					url: '/pages/messages/messages'
				});
			}
			if(type==="shop"){
				uni.navigateTo({
					url:"/pages/sendShop/sendShop"
									})
			}
			if(type==='good'){
				const 	target= {
								targetType: '1',
								targetName: '公聊',
								targetId: ''
							}
				const toTarget=encodeURIComponent(JSON.stringify(target)) 			
				uni.navigateTo({
					url:`/pages/sendGood/sendGood?toTarget=${toTarget}`
				})
			}
			if(type==='setting'){
				uni.navigateTo({
					url:'/pages/me/me'
				})
			}
		},
		async handerlove() {
			let result = {};
			try {
				if (this.isFavorite) {
				    uni.showModal({
				    	title:'确认取消收藏吗？',
						success:async (res)=> {
							if(res.confirm){
						const result=	await this.favoriteManger.remove(this.favorite_id)
								if(result.code){
									uni.showToast({
										title:'已取消收藏',
										position:'center'
									})
									this.$store.commit('msg/SET_user',{...this.storeData.user,favorite:result.favorite})
								    this.$emit('reLoadData')
										  this.close()
								}else{
									uni.showToast({
										title:'取消失败'+result.msg
									})
								}
							}
						}
				    })
					
				} else {
		            this.dialogShow=true
				}
		
			
			} catch (error) {
				console.error('操作失败', error);
				uni.showToast({
					title: '操作失败，请重试',
					icon: 'success'
				});
			}
		},
    async confirm(e){
		console.log("..........2",e);
			try{
			const res=await	this.favoriteManger.add(this.storeData.location,e)
			console.log(res);
			if(res.code){
				uni.showToast({
					title:'收藏成功',
					position:'center'
				})
					this.$store.commit('msg/SET_user',{...this.storeData.user,favorite:res.favorite})
				  this.$emit('reLoadData')
				  this.close()
			}else{
				uni.showToast({
					title:'收藏失败'+res.msg
				})
			}
			}catch(e){
				console.error(e);
			}
		}
	}
};
</script>

<style scoped>
/* 弹层主体 */
.popup-main {
	background-color: #fff;
	border-radius: 16px;
	padding: 24px 16px;
	transition: opacity 0.3s, transform 0.3s;
	z-index: 9999;
}
/* 头部样式 */
.header {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 30rpx;
	justify-content: space-between;
}
.user-info {
	display: flex;
	flex-direction: row;
	align-items: center;
		/*#ifndef APP-PLUS-NVUE*/  
		gap: 10rpx;
		/*#endif*/
}
.setting {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-right: 0;
	
}
.setting_txt{
	font-size: 28rpx;
	color: #55aaff;
}
.setting:active {
	
	background-color: #cfcfcf;
	transform: scale(0.9);
	opacity: 0.8;
}
/* 头像容器 */
.avatar-wrap {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}
.address {
	display: flex;
	flex-direction: row;
	width: 300rpx;
	padding: 10rpx 10rpx;
}

/* 关键：用view作为文本容器，行高更可靠 */
.address_txt {
	font-size: 28rpx;
	color: #333;
	/* #ifndef APP-PLUS-NVUE */
	white-space: normal;
	word-break: break-all;
	word-wrap: break-word;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	/* #endif */
	line-height: 42rpx; /* 28rpx字体建议行高1.5倍左右 */
}

/* 图标适配：确保图标与文本行高对齐 */
.uni-icons {
}
/* 头像 */
.avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}

/* 用户名 */
.username {
	font-size: 36rpx;
	font-weight: bold;
	color: #1a1a1a;
}

/* 用户标签 */
.user-tag {
	font-size: 12px;
	color: #666;
	background-color: #f5f5f5;
	padding: 2px 8px;
	border-radius: 12px;
}

/* 菜单网格布局 */
.menu-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap; /* 允许换行 */
	justify-content: space-between; /* 水平间距平均分配 */
	margin-bottom: 32px;
	padding: 0 10px; /* 左右留一点边距 */
}

/* 菜单项 */
.menu-item {
	width: 200rpx;
	display: flex;
	align-items: center;
	padding: 16rpx 8rpx;
	border-color: #666;
	border-width: 1rpx;
	border-radius: 12px;
	margin-bottom: 20px; /* 行间距，替代grid的gap */
}
.menu-item:active {
	background-color: #f5f5f5;
	transform: scale(0.98);
	opacity: 0.9;
}

/* 菜单图标 */
.menu-icon {
	margin-bottom: 8px;
	font-size: 24px;
}

/* 菜单文字 */
.menu-text {
	font-size: 14px;
	color: #333;
}

/* 底部区域 */
.footer {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 44px;
	background-color: #5f27cd;
	border-radius: 22px;
}
.footer:active {
	/* 背景色加深 */
	background-color: #5b5bb8;
	transform: scale(0.9);
	opacity: 0.8;
}

.close-btn_txt {
	color: #fff;
	font-size: 15px;
}

.close-btn:active {
	opacity: 0.8;
}
</style>
